<div class="content__title">
    <h1>
        Form Extended
        <small>Native angular elements to extend the form functions</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Form elements">
            <form nz-form>
                <div nz-form-item nz-row [nzGutter]="8">
                    <div nz-form-label nz-col [nzSm]="4">
                        <label [ngStyle]="{'color': color1}">Color pickers</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="4">
                        <nz-input [(ngModel)]="color1" name="color1" [(colorPicker)]="color1"></nz-input>
                    </div>
                    <div nz-form-label nz-col [nzSm]="4">
                        <label [ngStyle]="{'color': color2}">Rgba Color</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="4">
                        <nz-input [(ngModel)]="color2" name="color2"
                            [(colorPicker)]="color2" [cpOutputFormat]="'rgba'"></nz-input>
                    </div>
                </div>
            </form>
        </nz-card>
    </div>
</div>
